<template>
  <div id="viewDetails">
    <el-dialog title="用户邀请详情" :visible.sync="viewDetailDailog.isShow">
      <el-form
        ref="topData"
        :model="dataOfTop"
        label-width="100px"
        :inline="true"
        label-position="left"
      >
        <el-form-item label="用户名：">
          {{ viewDetailDailog.params.userName }}
        </el-form-item>
        <el-form-item label="邀请人数：">
          {{ viewDetailDailog.params.inviteNum }}
        </el-form-item>
        <el-form-item label="时间：">
          {{ viewDetailDailog.params.time }}
        </el-form-item>
      </el-form>
      <el-form
        ref="bottomData"
        :model="dataOfBottom"
        label-width="100px"
        class="bottom"
        label-position="left"
      >
        <el-form-item label="获得奖励：">
          <span v-if="viewDetailDailog.params.integralCount"
            >{{ viewDetailDailog.params.integralCount }}积分</span
          >
          <span
            v-show="viewDetailDailog.params.coupons"
            v-for="(item, index) of viewDetailDailog.params.coupons"
            :key="index"
            >{{ item.name }}x{{ item.couponsNum }} 张</span
          >
          <span
            v-for="(item, ind) of viewDetailDailog.params.physicalPrize"
            :key="ind"
            >{{ item.name }}x{{ item.physicalNum }} 个</span
          >
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogFormVisible = false">取 消</el-button> -->
        <el-button type="success" @click="viewDetailDailog.isShow = false"
          >关闭弹窗</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    viewDetailDailog: {
      params: {},
      isShow: false
    }
  },
  data() {
    return {
      dataOfTop: {},
      dataOfBottom: {},
      dialogFormVisible: true
    }
  },
  created() {},
  mounted() {},
  methods: {}
}
</script>

<style lang="less" scoped>
.bottom > .el-form-item:nth-last-child(1) > :deep(.el-form-item__content) {
  &:extend(.row_space);
  width: 70%;
}

.row_space {
  display: flex;
  align-items: center;
}
</style>
